<template>
  <div class="app-container-detail home">
    <el-form ref="baseForm" :model="coreIndexMap" label-position="top" label-width="164px" v-loading="loading">
      <el-card class="box-card" shadow="false">
        <div slot="header" class="clearfix">
          <!--          <h4>核心指标（延迟一个小时统计上个小时的数据）</h4>-->
          <h4>核心指标</h4>
        </div>
        <div class="chart" v-loading="loadingTop">

          <div class="chart-date">
            <el-radio-group v-model="indexDate" size="mini" @change="initCoreIndexData" class="trend-radio">
              <el-radio-button label="today">今天</el-radio-button>
              <el-radio-button label="yesterday">昨天</el-radio-button>
              <el-radio-button label="sevenDay">过去7天</el-radio-button>
              <el-radio-button label="month">过去30天</el-radio-button>
              <el-radio-button label="lastWeek">上周</el-radio-button>
              <el-radio-button label="lastMonth">上月</el-radio-button>
              <el-radio-button label="" v-if="indexDate === ''">自定义</el-radio-button>
            </el-radio-group>
            <div class="chart-date-selectors">
              <el-select v-model="orderSource" placeholder="请选择" size="mini" @change="initCoreIndexData">
                <el-option v-for="(item, index) in orderSourceLists" :value="item.value" :label="item.label" :key="index"></el-option>
              </el-select>
              <el-select v-model="timeZone" placeholder="请选择时区" size="mini" @change="initCoreIndexData">
                <el-option v-for="(item, index) in timeZoneList" :value="item.value" :label="item.label" :key="index"></el-option>
              </el-select>
              <el-date-picker type="daterange"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              v-model="indexCustomTime"
                              value-format="timestamp"
                              @change="changeIndexCustomTime"
                              size="mini"></el-date-picker>
            </div>

          </div>

          <div class="model-list" style="margin: 40px 0">
            <div class="model-list-card">
              <div class="main-mess">
                <div class="name">
                  <p class="title">
                    订单量
                    <el-tooltip class="item" effect="dark" content="下单成功的订单总数量" placement="top">
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </p>
                  <p class="num">{{ coreIndexMap.orderQty }}<span class="unit">单</span></p>
                </div>
              </div>
            </div>
            <div class="model-list-card">
              <div class="main-mess">
                <div class="name">
                  <p class="title">
                    成交额
                    <el-tooltip class="item" effect="dark" content="下单成功的订单总金额" placement="top">
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </p>
                  <p class="num">{{ coreIndexMap.dealAmount| currency(currencySymbol) }}</p>
                </div>
              </div>
            </div>
            <div class="model-list-card">
              <div class="main-mess">
                <div class="name">
                  <p class="title">
                    客单价
                    <el-tooltip class="item" effect="dark" content="总成交额/总订单量" placement="top">
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </p>
                  <p class="num">{{ coreIndexMap.customerUnitPrice|currency(currencySymbol) }}</p>
                </div>
              </div>
            </div>
            <!--            <div class="model-list-card">-->
            <!--              <div class="main-mess">-->
            <!--                <div class="name">-->
            <!--                  <p class="title">-->
            <!--                    转化率-->
            <!--                    <el-tooltip class="item" effect="dark" content="成交订单数/访问用户数" placement="top">-->
            <!--                      <i class="el-icon-question"></i>-->
            <!--                    </el-tooltip>-->
            <!--                  </p>-->
            <!--                  <p class="num">{{ coreIndexMap.percentConversion }}%</p>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
          <chart-line unit="订单量" unit-right="销量" unitRightSecond="成交额" :value="coreIndexMap.chartLineMap" height="220px"
                      :is-right="true" style="margin-top: -20px"></chart-line>
        </div>
      </el-card>
      <el-card class="box-card" shadow="false">
        <div slot="header" class="clearfix">
          <!--          <h4>综合数据 （客单价和连带率为延迟一小时更新一次）</h4-->
          <h4>综合数据</h4>
        </div>
<!--        <div class="chart-date">
          <el-radio-group v-model="dataDate" size="mini" @change="initComprehensiveData" class="trend-radio">
            <el-radio-button label="today">今天</el-radio-button>
            <el-radio-button label="yesterday">昨天</el-radio-button>
            <el-radio-button label="sevenDay">过去7天</el-radio-button>
            <el-radio-button label="month">过去30天</el-radio-button>
            <el-radio-button label="lastWeek">上周</el-radio-button>
            <el-radio-button label="lastMonth">上月</el-radio-button>
            <el-radio-button label="" v-if="dataDate === ''">自定义</el-radio-button>
          </el-radio-group>
          <div>
            <el-select v-model="timeZone" placeholder="请选择时区" size="mini" @change="initComprehensiveData">
              <el-option v-for="(item, index) in timeZoneList" :value="item.value" :label="item.label" :key="index"></el-option>
            </el-select>
            <el-date-picker type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            v-model="dataCustomTime"
                            value-format="timestamp"
                            @change="changeDataCustomTime()"
                            size="mini"></el-date-picker>
          </div>
        </div>-->
        <div class="chart-c" >
          <div class="chart-c-m noMore" v-loading="conversionFunnelLoading">
            <div class="chart_title">转化率漏斗</div>
            <div class="hot">
              <div style="border-bottom: 1px solid #e8e8e8;color:#555DBF;">
                <h3>转化率：{{ conversionFunnel.orderSuccessRate }}%</h3>
              </div>
              <div class="hot_li">
                <span class="hot_text no-link">访问用户（人）</span>
                <span class="hot_number">{{ conversionFunnel.userAccessCount }}</span>
                <span class="hot_number"></span>
              </div>
              <div class="hot_li">
                <span class="hot_text no-link">加入购物车（人）</span>
                <span class="hot_number">{{ conversionFunnel.addCartCount }}</span>
                <span class="hot_number">{{ conversionFunnel.userAccessRate }}%</span>
              </div>
              <div class="hot_li">
                <span class="hot_text no-link">发起结账（人）</span>
                <span class="hot_number">{{ conversionFunnel.checkoutCount }}</span>
                <span class="hot_number">{{ conversionFunnel.addCartRate }}%</span>
              </div>
              <div class="hot_li">
                <span class="hot_text no-link">添加支付信息（人）</span>
                <span class="hot_number">{{ conversionFunnel.paymentCount }}</span>
                <span class="hot_number">{{ conversionFunnel.checkoutRate }}%</span>
              </div>
              <div class="hot_li">
                <span class="hot_text no-link">下单成功（订单）</span>
                <span class="hot_number">{{ conversionFunnel.orderSuccessCount }}</span>
                <span class="hot_number">{{ conversionFunnel.paymentRate }}%</span>
              </div>
            </div>
          </div>

          <div class="chart-c-m noMore" v-loading="conversionFunnelLoading">
            <div class="chart_title">
              客单价
            </div>
            <chart-line :unit="orderAmountData.title" :value="orderAmountData"
                        style="height: 340px;padding: 0 10px"></chart-line>
          </div>
          <div class="chart-c-m noMore" v-loading="conversionFunnelLoading">
            <div class="chart_title">
              连带率
            </div>
            <chart-line :unit="orderCountData.title" :value="orderCountData"
                        style="height: 340px;padding: 0 10px"></chart-line>
          </div>
          <div class="chart-c-m" v-loading="conversionFunnelLoading">
            <div class="chart_title">
              复购率
            </div>
            <chart-line :unit="repurchaseData.title" :value="repurchaseData"
                        style="height: 340px;padding: 0 10px"></chart-line>
          </div>
          <div class="chart-c-m" v-loading="conversionFunnelLoading">
            <div class="chart_title">
              支付方式
            </div>
            <pie :unit="payTypePieData.title" :pie-data="payTypePieData.data"
                 style="height: 380px;padding: 0 10px"></pie>
          </div>
          <template v-for="(item, index) in mapData">
            <more-list :list="item.data" :name="item.name" :key="index" @changePage="handleChangePage($event, index)" v-loading="item.loading"></more-list>
          </template>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {ChartLine, Pie} from '_c/charts';
import moreList from './components/list';
import {parseTime} from '@/utils/tools';
import {
    getHotCountryRankList,
    getHotGoodsSaleRankList,
    getHotSearchKeywordRankList,
    getCoreIndex,
    getOrderAmountData,
    getOrderCountData,
    getProductDetailScanList,
    getProductAddCartList,
    getConversionFunnel,
    getIpCountryList,
    getRepurchaseRateData,
    getPayTypePieData,
    getOrderSourcePieData,
    getMemberSourcePieData
} from '@/api/stat-core';
import {mapGetters} from 'vuex';

export default {
    name: 'overview-index',
    components: {
        ChartLine,
        Pie,
        moreList
    },
    data () {
        return {
            width: 180,
            conversionFunnelLoading: false,
            loadingData: false,
            loading: false,
            color: 'rgb(63, 161, 255)',
            coreIndexMap: {
                orderQty: '',
                dealAmount: '',
                customerUnitPrice: '',
                percentConversion: '',
                chartLineMap: {}
            },
            orderAmountData: {date: [], data: [], title: ''},
            orderCountData: {date: [], data: [], title: ''},
            repurchaseData: {date: [], data: [], title: ''},
            payTypePieData: {date: [], data: [], title: ''},
            params: {searchDate: ''},
            time: '',
            dataCustomTime: [],
            indexCustomTime: [],
            dataDate: 'today',
            indexDate: 'today',
            indexStartTime: null,
            indexendTime: null,
            dataStartTime: null,
            dataendTime: null,
            hotCountryList: [],
            hotGoodsSalesList: [],
            productAddCartList: [],
            orderSourceList: [],
            memberSourceList: [],
            productDetailScanList: [],
            hotSearchKeywordList: [],
            ipCountryList: [],
            conversionFunnel: {
                userAccessCount: 0,
                userAccessRate: 0.0,
                addCartCount: 0,
                addCartRate: 0.0,
                checkoutCount: 0,
                checkoutRate: 0.0,
                paymentCount: 0,
                paymentRate: 0.0,
                orderSuccessCount: 0,
                orderSuccessRate: 0.0
            },
            globalParams: {},
            loadingTop: false,
            mapData: [
                {
                    name: '热卖国家',
                    apiName: getHotCountryRankList,
                    dataName: 'hotCountryList',
                    data: [],
                    page: 0,
                    pageSize: 6,
                    loading: false
                },
                {
                    name: '热卖商品',
                    apiName: getHotGoodsSaleRankList,
                    dataName: 'hotGoodsSalesList',
                    data: [],
                    page: 0,
                    pageSize: 6,
                    loading: false
                },
                {
                    name: '商品浏览排行',
                    apiName: getProductDetailScanList,
                    dataName: 'productDetailScanList',
                    data: [],
                    page: 0,
                    pageSize: 6,
                    loading: false
                },
                {
                    name: '加购商品排行',
                    apiName: getProductAddCartList,
                    dataName: 'productAddCartList',
                    data: [],
                    page: 0,
                    pageSize: 6,
                    loading: false
                },
                {
                    name: '搜索热词',
                    apiName: getHotSearchKeywordRankList,
                    dataName: 'hotSearchKeywordList',
                    data: [],
                    page: 0,
                    pageSize: 6,
                    loading: false
                },
                {
                    name: '访客来源国家',
                    apiName: getIpCountryList,
                    dataName: 'ipCountryList',
                    data: [],
                    page: 0,
                    pageSize: 6,
                    loading: false
                },
                {
                    name: '订单来源渠道',
                    apiName: getOrderSourcePieData,
                    dataName: 'orderSourceList',
                    data: [],
                    page: 0,
                    pageSize: 6,
                    loading: false
                },
                {
                    name: '访客来源渠道',
                    apiName: getMemberSourcePieData,
                    dataName: 'memberSourceList',
                    data: [],
                    page: 0,
                    pageSize: 6,
                    loading: false
                }
            ],
            timeZone: '-5',
            timeZoneList: [
                {
                    value: '-5',
                    label: '美国东部时间(UTC-5)'
                },
                {
                    value: '-6',
                    label: '美国中部时间(UTC-6)'
                },
                {
                    value: '-7',
                    label: '美国西部时间(UTC-7)'
                },
                {
                    value: '-8',
                    label: '美国太平洋时间(UTC-8)'
                },
                {
                    value: '-9',
                    label: '美国阿拉斯加时间(UTC-9)'
                },
                {
                    value: '-10',
                    label: '夏威夷时区(UTC-10)'
                },
                {
                    value: '+8',
                    label: '中国东部时间(UTC+8)'
                }
            ],
            orderSource: 'all',
            orderSourceLists: [
                {
                    value: 'all',
                    label: '所有'
                },
                {
                    value: 'fb',
                    label: 'FaceBook'
                },
                {
                    value: 'mamba',
                    label: '曼巴'
                }
            ]
        };
    },
    computed: {
        ...mapGetters(['siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        currencySymbol () {
            return this.siteInfo.currencySymbol;
        }
    },
    created () {
    },
    mounted () {
    // 加载核心指标
        this.initCoreIndexData();
        // 加载综合数据
        this.initComprehensiveData();
    },
    methods: {
        handleDateTimes (dateTime, intervalDays) {
            console.log(this.timeZone);
            let offset = dateTime.getTimezoneOffset();
            // 获取指定时区的相应时间对象
            let tempTime = new Date(dateTime.getTime() + offset * 60 * 1000 + this.timeZone * 60 * 60 * 1000);
            // 获取指定时区时间的详细信息
            let tempMonth = (100 + tempTime.getMonth() + 1).toString().substring(1);
            let tempDate = (100 + tempTime.getDate()).toString().substring(1);
            let tempStartString = tempTime.getFullYear() + '/' + tempMonth + '/' + tempDate + ' 00:00:00';
            let tempStartTime = new Date(tempStartString + ' UTC' + this.timeZone).getTime();
            let tempFinishTime = tempStartTime + intervalDays * 24 * 60 * 60 * 1000 - 1000 * 1;
            return [tempStartTime, tempFinishTime];
        },
        handleChangeDate (dateType) {
            if (dateType === undefined || dateType === '' || dateType == null) {
                dateType = 'today';
            }
            let tempTimes = [];
            let currentTime = new Date();
            if (dateType === 'today') {
                tempTimes = this.handleDateTimes(currentTime, 1);
            } else if (dateType === 'yesterday') {
                let yesterdayTime = new Date(currentTime.getTime() - 24 * 60 * 60 * 1000);
                tempTimes = this.handleDateTimes(yesterdayTime, 1);
            } else if (dateType === 'sevenDay') {
                let sevenDayTime = new Date(currentTime.getTime() - 24 * 60 * 60 * 1000 * 7);
                tempTimes = this.handleDateTimes(sevenDayTime, 7);
            } else if (dateType === 'month') {
                let monthTime = new Date(currentTime.getTime() - 24 * 60 * 60 * 1000 * 30);
                tempTimes = this.handleDateTimes(monthTime, 30);
            } else if (dateType === 'lastWeek') {
                let intervalDays = 7 + currentTime.getDay();
                let lastWeekTime = new Date(currentTime.getTime() - 24 * 60 * 60 * 1000 * intervalDays);
                tempTimes = this.handleDateTimes(lastWeekTime, 7);
            } else if (dateType === 'lastMonth') {
                let tempYear = currentTime.getFullYear();
                let tempMonth = currentTime.getMonth();
                if (tempMonth === 0) {
                    tempYear -= 1;
                    tempMonth = 11;
                } else {
                    tempMonth -= 1;
                }
                tempMonth = (100 + tempMonth + 1).toString().substring(1);
                let tempStartString = tempYear + '/' + tempMonth + '/01 00:00:00';
                let tempStart = new Date(tempStartString + ' UTC' + this.timeZone).getTime();
                let tempMonthStr = (100 + currentTime.getMonth() + 1).toString().substring(1);
                let tempString = currentTime.getFullYear() + '/' + tempMonthStr + '/01 00:00:00';
                let tempFinish = new Date(tempString + ' UTC' + this.timeZone).getTime() - 1000 * 1;
                tempTimes = [tempStart, tempFinish];
            } else {
                tempTimes = this.handleDateTimes(currentTime, 1);
            }

            return tempTimes;
        },
        handleIndexDate () {
            let tempTimes = this.handleChangeDate(this.indexDate);
            this.indexStartTime = tempTimes[0];
            this.indexFinishTime = tempTimes[1];
            this.indexCustomTime = [tempTimes[0] + '', tempTimes[1] + ''];
            this.initCoreIndexData();
        },
        handleDataDate () {
            let tempTimes = this.handleChangeDate(this.dataDate);
            this.dataStartTime = tempTimes[0];
            this.dataFinishTime = tempTimes[1];
            this.dataCustomTime = [tempTimes[0] + '', tempTimes[1] + ''];
            this.initComprehensiveData();
        },
        initCoreIndexData () {
            if (this.indexDate === '') {
                this.indexStartTime = new Date(parseTime(this.indexCustomTime[0], '{y}/{m}/{d}') + ' 00:00:00 UTC' + this.timeZone).getTime();
                this.indexFinishTime = new Date(parseTime(this.indexCustomTime[1], '{y}/{m}/{d}') + ' 23:59:59 UTC' + this.timeZone).getTime();
                this.dataStartTime = this.indexStartTime;
                this.dataFinishTime = this.indexFinishTime;
            } else {
                let tempTimes = this.handleChangeDate(this.indexDate);
                this.indexStartTime = tempTimes[0];
                this.indexFinishTime = tempTimes[1];
                this.dataStartTime = tempTimes[0];
                this.dataFinishTime = tempTimes[1];
                this.indexCustomTime = [tempTimes[0] + '', tempTimes[1] + ''];
            }
            let params = {
                siteId: this.siteId, startTime: this.indexStartTime, endTime: this.indexFinishTime, orderSource: this.orderSource
            };
            this.loadingTop = true;
            getCoreIndex(params).then(res => {
                this.coreIndexMap = res.data;
                this.loadingTop = false;
            });
            this.initComprehensiveData();
        },
        initDataList (apiName, index, params) {
            this.mapData[index].loading = true;
            apiName(params).then(res => {
                this.mapData[index].data = res.data || [];
                this.mapData[index].loading = false;
            }).catch(() => {
                this.mapData[index].loading = false;
            });
        },
        initComprehensiveData () {
            this.conversionFunnelLoading = true;
            // if (this.dataDate === '') {
            //     this.dataStartTime = new Date(parseTime(this.dataCustomTime[0], '{y}/{m}/{d}') + ' 00:00:00 UTC' + this.timeZone).getTime();
            //     this.dataFinishTime = new Date(parseTime(this.dataCustomTime[1], '{y}/{m}/{d}') + ' 23:59:59 UTC' + this.timeZone).getTime();
            // } else {
            //     let tempTimes = this.handleChangeDate(this.dataDate);
            //     this.dataStartTime = tempTimes[0];
            //     this.dataFinishTime = tempTimes[1];
            //     this.dataCustomTime = [tempTimes[0] + '', tempTimes[1] + ''];
            // }
            let params = {
                siteId: this.siteId, startTime: this.dataStartTime, endTime: this.dataFinishTime
            };
            this.globalParams = params;

            this.mapData.forEach((s, index) => {
                const newParams = {...params, page: s.page, pageSize: s.pageSize};
                this.initDataList(s.apiName, index, newParams);
            });

            getOrderAmountData(params).then(res => {
                this.orderAmountData = {
                    date: res.data.xData,
                    data: res.data.seriesData,
                    title: res.data.title
                };
            });
            getOrderCountData(params).then(res => {
                this.orderCountData = {
                    date: res.data.xData,
                    data: res.data.seriesData,
                    title: res.data.title
                };
            });
            getRepurchaseRateData(params).then(res => {
                this.repurchaseData = {
                    date: res.data.xData,
                    data: res.data.seriesData,
                    title: res.data.title
                };
            });
            getPayTypePieData(params).then(res => {
                this.payTypePieData = {
                    data: res.data.seriesData,
                    title: res.data.title
                };
            });

            getConversionFunnel(params).then(res => {
                this.conversionFunnel = res.data;
                this.conversionFunnel.userAccessRate = this.conversionFunnel.userAccessRate.toFixed(2);
                this.conversionFunnel.addCartRate = this.conversionFunnel.addCartRate.toFixed(2);
                this.conversionFunnel.checkoutRate = this.conversionFunnel.checkoutRate.toFixed(2);
                this.conversionFunnel.paymentRate = this.conversionFunnel.paymentRate.toFixed(2);
                this.conversionFunnel.orderSuccessRate = this.conversionFunnel.orderSuccessRate.toFixed(2);
                this.conversionFunnelLoading = false;
            });
        },
        changeIndexCustomTime () {
            this.indexDate = '';
            this.initCoreIndexData();
        },
        changeDataCustomTime () {
            this.dataDate = '';
            this.initComprehensiveData();
        },
        goGoodsDetail (id) {
            // this.$router.push({name: 'goods-detail', params: {id}}).catch(() => {});
            let routeData = this.$router.resolve({
                name: 'goods-detail',
                params: {id},
                query: this.$route.query
            });
            window.open(routeData.href, '_blank');
        },
        handleChangePage (page, index) {
            const data = this.mapData[index];
            const pageSize = data.pageSize + page * 20;
            const newParams = {...this.globalParams, page: 0, pageSize};
            this.initDataList(data.apiName, index, newParams);
        }
    }
};
</script>

<style scoped lang="scss">
.home {
  background: #F1F2F8 !important;
  padding: 0 !important;

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    margin: -15px -15px;
    height: 40px;
    padding: 10px;

    > div {
      display: flex;
      align-items: center;
      font-size: 16px;
    }

    .mess {
      padding-right: 28px;

      .link {
        font-size: 16px;
      }
    }
  }

  .box-card {
    &:not(:first-child) {
      margin-top: 10px;
    }

    h4 {
      margin: 0;
      display: flex;
      justify-content: space-between;
      padding-bottom: 8px;
      align-items: center;

      .more {
        color: #0084FF;
        font-size: 14px;

        svg {
          margin-right: 4px;
        }
      }
    }

    .flex-c {
      h3 {
        font-size: 24px;
      }
    }

    .chart-c {
      display: flex;
      padding-top: 20px;
      padding-bottom: 20px;
      flex-wrap: wrap;

      .chart-c-m {
        overflow: hidden;
        width: calc((100% - 60px) / 3);
        height: 450px;
        border: 1px solid #d3d7dd;
        margin-bottom: 20px;
        &.noMore{
          height: 400px;
        }

        /* 移动端适配 */
        @media screen and (max-width: 1000px) {
          width: 100%;
          margin-right: 0 !important;
          height: auto;
          min-height: 350px;
          &.noMore {
            height: auto;
            min-height: 350px;
          }
        }

        .hot {
          padding: 0 25px;
          font-size: 14px;
          color: #212121;
          position: relative;
          height: 320px;

          .hot_li {
            height: 52px;
            display: flex;
            line-height: 14px;
            border-bottom: 1px solid #e8e8e8;
            position: relative;

            .hot_text {
              padding: 19px 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &.no-link {
                flex: 2 2;
              }

              &:hover {
                color: #0c367b;
                cursor: pointer;
              }
            }

            .hot_number {
              flex: 1 1;
              text-align: right;
              padding: 19px 0;
            }
          }
        }

        &:not(:last-child) {
          margin-right: 20px;
        }

        .chart_title {
          height: 58px;
          line-height: 18px;
          background: #f8f9fb;
          font-size: 18px;
          color: #30354d;
          display: flex;
          padding: 21px 0;

          &:before {
            content: '';
            background: #555dbf;
            width: 4px;
            height: 18px;
            display: inline-block;
            margin-left: 20px;
            margin-right: 15px;
          }
        }
      }
    }

    .model-main {
      display: flex;
      padding: 10px 0;

      .model {
        h4 {
          font-size: 18px;
          border: 0;
          font-weight: 500;
          color: rgba(26, 137, 255, 1);
          padding-bottom: 0;
        }

        p {
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          margin: 14px 0;

          &.re {
            font-size: 24px;
            color: rgba(26, 137, 255, 1);
          }

          > span {
            font-size: 14px;
            padding-left: 10px;
          }
        }

        &.base {
          flex: 2;
          border-right: 1px solid #E8E8E8;
          margin-right: 14px;
        }

        &.big {
          flex: 6;

          .model-c {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }

  .model-list {
    display: flex;

    /* 移动端适配 */
    @media screen and (max-width: 1000px) {
      flex-direction: column;
    }

    .model-list-card {
      width: 33%;
      padding: 17px 0 14px 23px;
      border: 1px solid #d3d7dd;

      &:not(:last-child) {
        margin-right: 12px;
      }

      /* 移动端适配 */
      @media screen and (max-width: 1000px) {
        width: 100%;
        margin-bottom: 12px;

        &:not(:last-child) {
          margin-right: 0;
        }
      }

      .main-mess {
        display: flex;
        justify-content: space-between;

        .name {
          color: #7e849c;

          p {
            margin: 0;
          }

          .title {
            font-size: 16px;
            display: flex;
            align-items: center;

            .item {
              margin-left: 12px;
            }

            &:before {
              content: '';
              display: inline-block;
              background: #555dbf;
              height: 16px;
              width: 5px;
              margin-right: 5px;
            }
          }

          .num {
            color: #30354d;
            font-weight: 300;
            font-size: 32px;
            margin: 2px 0 6px 0;
            text-align: left;

            .unit {
              margin-left: 6px;
              font-size: 16px;
              color: #7e849c;
            }
          }
        }

        > svg {
          font-size: 60px;
        }
      }

      .foot {
        display: flex;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        padding-top: 6px;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
          margin: 0;

          &:last-child {
            font-size: 20px;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }

  .chart-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EBEEF5;

    /* 移动端适配 */
    @media screen and (max-width: 1000px) {
      flex-direction: column;
      align-items: flex-start;

      .el-radio-group {
        margin-bottom: 10px;
      }

      .trend-radio {
        display: flex;
        flex-wrap: wrap;

        .el-radio-button {
          margin-bottom: 5px;
        }
      }

      .chart-date-selectors {
        width: 100%;
      }
    }
  }

  /* 移动端全局适配样式 */
  @media screen and (max-width: 1000px) {
    .el-card__body {
      padding: 0 10px !important;
    }

    .model-list-card .main-mess .name .num {
      font-size: 24px;
    }

    .hot {
      padding: 0 10px !important;
    }

    .el-form-item {
      margin-bottom: 10px;
    }
  }
}

</style>

<style lang="scss">
.app-container-detail {
  &.home {
    .el-form {
      padding: 0;
    }
  }
}

.home {
  .box-card {
    .el-card__header {
      border: 0;
      padding-bottom: 0;
      padding-top: 12px;
    }

    .el-card__body {
      padding: 0 20px;

      .el-table th.is-leaf {
        background: transparent;
        border: 0;
      }

      /* 移动端适配 */
      @media screen and (max-width: 1000px) {
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
          width: 100%;
        }

        .el-select {
          width: 100%;
          margin-bottom: 10px;
        }

        .el-date-editor--daterange.el-input__inner {
          width: 100%;
        }

        .chart-date-selectors {
          width: 100%;

          .el-select, .el-date-editor {
            width: 100%;
            margin-bottom: 10px;
          }
        }
      }
    }

    .flex-c .el-form-item .el-form-item__label {
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }

    &.no-background {
      background: transparent;

      .el-card__header {
        padding-left: 0;
      }

      .el-card__body {
        padding: 0;
      }
    }

    .chart {
      text-align: center;

      /* 移动端适配 */
      @media screen and (max-width: 1000px) {
        .chart-date > .chart-date-selectors {
          display: flex;
          flex-direction: column;
          width: 100%;
        }
      }
    }

    .trend-radio {
      margin-top: 22px;
      z-index: 1;
      position: relative;
      border: none;

      .el-radio-button__inner {
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
      }

      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: transparent;
        border-left: 0;
        border-right: 0;
        border-color: #1C73E7;
        color: #1C73E7;
        box-shadow: none;
        border-bottom: 2px solid #1C73E7;
      }

      /* 移动端适配 */
      @media screen and (max-width: 1000px) {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .el-radio-button {
          margin-right: 5px;
          margin-bottom: 5px;
        }

        .el-radio-button__inner {
          padding: 8px 12px;
          font-size: 12px;
        }
      }
    }
  }

  span {
    &.primary {
      color: #1A89FF;
    }

    &.success {
      color: #32B30E;
    }

    &.danger {
      color: #FF4040;
    }
  }

  .no-thead {
    thead {
      display: none;
    }
  }

  /* 移动端适配 - 图表组件 */
  @media screen and (max-width: 1000px) {
    .hot_li {
      height: auto !important;
      padding: 10px 0;
      flex-wrap: wrap;

      .hot_text, .hot_number {
        padding: 5px 0 !important;
      }
    }

    .chart_title {
      padding: 15px 0 !important;
      font-size: 16px !important;
      height: auto !important;
    }
  }
}
</style>
